<%@ page pageEncoding="utf-8" language="java"%>
<%@ include file="/commons/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html:html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<html:base />
	<link rel="stylesheet" href="<c:out value="${ctx}"/>/styles/jquery.datePicker.css" type="text/css"/>
    <link href='<c:out value="${ctx}"/>/styles/style1.css' rel="stylesheet" type="text/css" />
    <link href='<c:out value="${ctx}"/>/styles/demo_table_jui.css' rel="stylesheet" type="text/css" />
    <link href='<c:out value="${ctx}"/>/styles/jquery-ui-1.7.2.custom.css' rel="stylesheet" type="text/css" />
    <script type="text/javascript" language="javascript" src='<c:out value="${ctx}"/>/js/jquery/jquery.js'></script>
	<script type="text/javascript" language="javascript" src='<c:out value="${ctx}"/>/js/jquery/jquery.dataTables.js'></script>
	<script type="text/javascript" language="javascript" src="<c:out value="${ctx}"/>/js/jquery/date.js"></script>
	<script type="text/javascript" language="javascript" src="<c:out value="${ctx}"/>/js/jquery/jquery.datePicker.js"></script>
	<script type="text/javascript">
		var oTable;
		var dataStat = null;
		var dataDetail = null;
		
		function displayCheckValue(enable_flag) {
			if (enable_flag == 'Y') {
				return '<input name="email[]" type="checkbox" value="' + tableData[i].email + '" checked="checked" />';
			} else {
				return '<input name="email[]" type="checkbox" value="' + tableData[i].email + '" />';				
			}
		}
		
		function buildTable(tableData) {
			oTable.fnClearTable(0);    // 等同html("")
	    	//add the table rows
			$.each(tableData, function(i){	
				//alert(i + ":" + tableData[0].starttime);
				oTable.fnAddData([		
			    	tableData[i].email,
			    	tableData[i].nickname,
			    	tableData[i].create_date,
			    	displayCheckValue(tableData[i].enable_flag)
				]);
			});
			oTable.fnDraw();           // 重新繪製
		};

		function querySubmit() {
			dataString = $("#mainForm").serialize();
			$.ajax({
				url: '<c:out value="${ctx}"/>/ajaxMember2CityQuery.do',
				type: 'POST',
				data: dataString,
				dataType: 'json',
				success: function(data, status){
					buildTable(data);
				},
				error: function(xhrInstance, status, xhrException) {
					alert("failure:" + status);
				}
			});
			return false;
		}		

		function saveSubmit() {
			dataString = $("#mainForm").serialize();
			$.ajax({
				url: '<c:out value="${ctx}"/>/ajaxMember2CitySave.do',
				type: 'POST',
				data: dataString,
				dataType: 'json',
				success: function(data, status){
					buildTable(data);
				},
				error: function(xhrInstance, status, xhrException) {
					alert("failure:" + status);
				}
			});
			return false;
		}		

		/**
		 * Ready to DataTable Grid
		 */
		$(document).ready(function() {
			oTable = $('#table_grid').dataTable({
				"bJQueryUI": true,
				"sPaginationType": "full_numbers",
				"aaSorting": []
			});
			
			
			Date.format = 'yyyy/mm/dd';
			$('td input[name$="_date"]').datePicker({startDate:'1996-01-01'});
			$('td input[name$="_date"]').each(function() {
				if ($(this).val().length > 10) {
					$(this).attr('value', $(this).val().substring(0, 10));
				}
			}); 
			
		} );	// end ready function
	</script>
    <title>會員管理</title>
</head>

<body>
<div id="dt_example">
<form id="mainForm" method="post" name="mainForm">
	<div id="Categories" class="queryarea">
   	<table id="shopping_list" width="100%" border="0">
	    <tr>
	      <th  class="th" colspan="4"> 查詢區(請輸入條件)</th>
	    </tr>
	    <tr>
	      <td width="15%">電子郵件：</td>
	      <td width="35%">
	      	<html:text property="email" size="40" name="lazyForm"/>     
	      </td>
	      <td width="15%">會員狀態</td>
	      <td width="35%" >
	      	開通<html:checkbox name="lazyForm" property="enable_flag" value="Y" checked="checked" />
	      	封鎖<html:checkbox name="lazyForm" property="enable_flag" value="N" />
	      </td>	     
	    </tr>
	    <tr>
	      <td>䁥稱：</td>
	      <td>
	      	<html:text property="nickname" size="40" name="lazyForm"/>     
	      </td>
	      <td>註冊日期區間：</td>
	      <td>
	      	<html:text name="lazyForm" property="start_date" size="10"/>
	      	<html:text name="lazyForm" property="end_date" size="10"/>
	      </td>
	    </tr>   
	    <tr>
	      <th colspan="4" class="td1">
	        <input type="button" name="query" id="query" onclick="querySubmit()" value="查詢" />
	        <input type="button" name="save" id="save" onclick="saveSubmit()" value="儲存" />
	      </th>
	    </tr>
  	</table>
	</div>
</form>
<div id="container">
<div class="demo_jui" id="divDetail" style="display:none">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="table_grid">
	<thead>
		<tr>
			<th>電子郵件</th>
			<th>䁥稱</th>
			<th>註冊日期</th>
			<th>狀態</th>
		</tr>
	</thead>
	<tbody id="tableBody">
	</tbody>
</table>
</div>

</div>
</div>

</body>
</html:html>
